<template>
  <!-- 在模板中不用使用count.value -->
  <!-- reactive方式 -->
  <h1>{{ count.value }}</h1>
  <button @click="btn(1)">点击+1</button>
  <button @click="btn(10)">点击+10</button>
  <button @click="count.value += 20">点击+20</button>

  <!-- ref 方式 -->
  <h1>{{ countRef }}</h1>
  <button @click="btnRef(1)">点击+1</button>
  <button @click="btnRef(10)">点击+10</button>
  <button @click="countRef += 20">点击+20</button>
</template>

<script>
import { reactive, ref } from 'vue';
const useRefCount = () => {
  const countRef = ref(0);
  const btnRef = (number) => {
    countRef.value += number;
    //   console.log(count);
  };
  return { countRef, btnRef };
};
const useReactiveCount = () => {
  const count = reactive({ value: 0 });
  const btn = (number) => {
    count.value += number;
  };
  return { count, btn };
};
export default {
  setup() {
    return { ...useRefCount(), ...useReactiveCount() };
  },
};
</script>
